<template>
  <div class="game">
    <div class="screen-wrap">
      <div class="screen" :style="{backgroundColor: recordStore.background}">
        <SVG :background="recordStore.background">
          <SelectPlayer v-if="recordStore.period === 'select'" />
          <Battle v-else-if="recordStore.period === 'stage' || recordStore.period === 'gaming' || recordStore.period === 'over'" />
          <HUD v-if="recordStore.period === 'gaming' || recordStore.period === 'over'" />
        </SVG>
      </div>
    </div>
    <div class="game-process">
      <div class="proc-wrap">
        <ProcessMessage />
      </div>
    </div>
  </div>
</template>

<script setup>
  import SVG from '@/components/SVG.vue'
  import ProcessMessage from './ProcessMessage.vue'
  import SelectPlayer from './SelectPlayer.vue'
  import Battle from './Battle.vue'
  import HUD from './HUD.vue'
  import { useRecordStore } from '@/store/gameRecord'
  import { onMounted, onUnmounted } from 'vue'

  const recordStore = useRecordStore()

  const onKeyUp = (e) => {
    if((e.key === 'Escape') && (recordStore.period === 'stage' || recordStore.period === 'gaming')) {
      recordStore.switchPause()
    }
  }

  onMounted(() => {
    document.addEventListener('keyup', onKeyUp)
  })

  onUnmounted(() => {
    document.removeEventListener('keyup', onKeyUp)
  })

</script>

<style lang="scss" scoped>
  .game {
    flex: auto;
    display: flex;
    user-select: none;
    cursor: default;

    .screen-wrap { /** 512*480 416*416 */
      flex: auto;
      height: 100%;

      .screen {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .game-process {
      flex-shrink: 0;
      width: 210px;
      height: 100%;
      background-color: #1a2626;
      padding: 12px;

      .proc-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #b5b6e5;
        border-radius: 4px;
      }
    }
  }
</style>